<template>
  <div class="App">
    <h1 class="content">我是App</h1>
  <div>
    <p v-red>自定义指令test1</p>
    <p v-red>自定义指令test2</p>
    <p v-bgColor="'green'">自定义指令test3</p>
    <p v-bgColor="'blue'">自定义指令test4</p>
  </div>
   
    <Count/>
  </div>
</template>

<script>
import Count from '@/components/Count';


export default {
  name: 'App',
  components: {
    Count,
  },
  directives:{
    // 简写的自定义指令（定义的时候不需要添加v-,使用的时候需要添加v-）

    red(el){
      // el:指令所绑定的元素，可以直接用来操作DOM
       console.log("el.parentNode", el.parentNode);
      el.style.background="red";
    },
    // 简写的接受值的自定义指令
    bgColor(el,binding){
      el.style.background = binding.value;
    }

  }

  

}
</script>



